<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/top::head">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <div th:replace="/common/top::header">

        </div>
        <div id="Content">
            <div id="Welcome">
                <div id="WelcomeContent">
                    Welcome to MyPetStore!
                </div>
            </div>

            <div id="Main">
                <div id="Sidebar">
                    <div id="SidebarContent">
                        <div th:each="category:${categories}">
                            <a th:href="|CategoryController?cate_id=${category.getCategoryId()}&cate_name=${category.getCategoryName()}|"><span th:text="${category.getCategoryName()}"></span></a>
                            <br/> <span th:text="${category.getCategoryIntroduction()}"></span> <br/>
                        </div>


                    </div>
                </div>

                <div id="MainImage">
                    <div id="MainImageContent">
                        <map name="estoremap">
                            <area alt="Birds" coords="72,2,280,250" href="CategoryController?cate_id=5&cate_name=Birds" shape="rect" cate_id=5 />
                            <area alt="Fish" coords="2,180,72,250" href="CategoryController?cate_id=1&cate_name=Fish" shape="rect" cate_id=1 />
                            <area alt="Dogs" coords="60,250,130,320" href="CategoryController?cate_id=2&cate_name=Dogs" shape="rect" cate_id=2 />
                            <area alt="Reptiles" coords="140,270,210,340" href="CategoryController?cate_id=4&cate_name=Reptiles" shape="rect" cate_id=4 />
                            <area alt="Cats" coords="225,240,295,310" href="CategoryController?cate_id=3&cate_name=Cats" shape="rect" cate_id=3 />
                            <area alt="Birds" coords="280,180,350,250" href="CategoryController?cate_id=5&cate_name=Birds" shape="rect" cate_id=5 />
                        </map>
                        <img height="355" src="../images/splash.gif" align="middle" usemap="#estoremap" width="350" />
                    </div>
                </div>
                <div id="Separator">&nbsp;</div>
            </div>
            <script>
                var float_window=$(`<div id='float-window' style='position: fixed;min-width:150px;min-height: 150px;    background: #36bf9f;overflow: auto'>
		<table>
            <tr>
                <th>Product ID</th>
                <th>Name</th>
            </tr>
		</table>
			</div>`);
                let current_cate_id;
                $("body").append(float_window);
                float_window.hide();
                $("#MainImageContent area").mousemove(function(event){
                    // console.log("enter",event,this)
                    var cate_id=$(this).attr("cate_id");
                    float_window.show();
                    float_window.css("left",event.clientX+"px");
                    float_window.css("top",event.clientY+30+"px");

                    if(cate_id==current_cate_id)return;
                    current_cate_id=cate_id;
                    ProductWindowServlet(current_cate_id)
                }).mouseout(function (event){
                    // console.log("out")
                    float_window.hide();
                })
                function ProductWindowServlet(cate_id){

                    $.ajax({
                        url:ServerApi+"ProductWindowServlet",
                        data:{
                            cate_id:cate_id,
                        },
                        success:function(res){
                            res=JSON.parse(res);
                            if(res.status!=200){
                                error(res.msg);
                            } else {
                                float_window.append("");
                                float_window.find("tr:gt(0)").remove();
                                for(let i of res.data.Products){
                                    float_window.find("table").append(`<tr><td>${i.productId}</td><td>${i.productName}</td></tr>`)
                                }
                            }
                        },
                        error:function (){
                            error("服务器异常");
                        }
                    })
                }
            </script>
        </div>
        <div th:replace="/common/bottom">

        </div>

</body>
</html>